.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    .drawer-overlay {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        transition: all 0.25s ease;
    }

    .drawer-body {
        position: absolute;
        background-color: #fff;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: all 0.25s ease;
        overflow: hidden;
    }

    .drawer-header {
        height: 120rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        flex-shrink: 0;
    }
    .drawer-header-clear {
        transform: rotate(45deg);
    }
    .drawer-content {
        flex: 1;
        overflow: hidden;
    }
}

.drawer-show {

    .drawer-overlay {
        opacity: 1;
    }
    .drawer-body {
        transform: translateY(0);
    }
}

.drawer-hide {
    // transform: translateY(100%);

    .drawer-overlay {
        opacity: 0;
    }
    .drawer-body {
        transform: translateY(100%);
    }
}
